<template>
  <div class="chat-container">
    <div class="timeline-container">
      <el-timeline>
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div id="container" class="input-container">
      <div id="chat" class="chat-input">
        <el-input
            v-model="msg"
            input-style="width: calc(100% - 80px); height: 60px; border-radius: 8px;"
            :rows="2"
            type="text"
            placeholder="请输入消息"
            @keydown.enter="sendMsg();"
        />
        <el-button @click="sendMsg()" class="send-button">发送</el-button>
      </div>
    </div>
  </div>    
</template>
<script setup>
import { MoreFilled } from '@element-plus/icons-vue'
import {ref, onMounted} from "vue";
import {getChat} from '@/api/chat'

const activities = ref([
  {
    content: '请问有什么可以帮您的?',
    timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
    color: '#0bbd87',
  },
]);

const msg = ref('');

const sendMsg = () => {
  activities.value.push(
    {
      content: `你:${msg.value}`,
      timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
      size: 'large',
      type: 'primary',
      icon: MoreFilled,
    },
  );

  activities.value.push(
    {
      content: 'waiting...',
      timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
      color: '#0bbd87',
    },
  );

  getChat(msg.value).then(res => {
    activities.value.pop();
    activities.value.push(
      {
        content: res.data,
        timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
        color: '#0bbd87',
      },
    );
  });
  msg.value = '';
};
</script>
<style scoped>
  .chat-container {
    background-color: #A8C9D4;
    padding: 10px;
    border-radius: 8px;
    width: 600px;
    height: 500px;
    display: flex;
    flex-direction: column;
  }
  .timeline-container {
    height: 600px;
    width: 100%;
    overflow-y: auto;
    border: 1px solid #1e7ba2;
    border-radius: 8px;
    padding: 10px;
  }
  .input-container {
    margin-top: 10px;
  }
  .chat-input {
    display: flex;
    align-items: center;
  }
  .send-button {
    margin-left: 10px;
    height: 60px;
    border-radius: 8px;
  }
</style>
